<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            border: 0;
        }

        body {
            display: flex;
            justify-content: flex-start;
        }

        .navigation {
            display: flex;
            background-color: rgb(48, 65, 86);
            height: 100vh;
            width: 12rem;
            justify-content: center;
            list-style-type: none;
        }

        .wrap {
            display: flex;
            justify-content: center;
            background-color: rgb(48, 65, 86);
            width: 10rem;
            height: 1rem;
            color: inherit;
            color: white;
            text-decoration: none;
            padding-right: 1rem;
            margin: 3rem;
        }

        .selected {
            color: #7B8CFE;
        }

        .title {
            display: block;
            height: 2rem;
            width: 100vh;
            background-color: #ffffff;
        }

        .chat {
            display: flex;
            height: 100vh;
            width: 100%;
            flex-direction: column;
            justify-content: end;
            align-items: center;
            background-color: #eceff7;
        }

        .chat-box {
            z-index: 1;
            margin-bottom: 2rem;
            width: 50rem;
            height: 9.375rem;
            border: 0.0625rem solid #1f1f1f;
            box-sizing: border-box;
            border-radius: .625rem;
            text-align: center;
        }

        input::placeholder {
            text-align: center;
            text-indent: 0.625rem;
        }

        .chat-content {
            width: 50rem;
            height: 100vh;
            overflow: auto;
        }

        .simple-content {
            list-style-type: none;
            padding-left: 2rem;
            padding-top: 2rem;
        }
    </style>
</head>

<body>
    <!-- 旁边的导航栏 -->
    <ul class="navigation" id="nav">
        <div class="menu-wrapper">
            <a href="./index.html" class="wrap selected">
                <li>
                    <span>首页</span>
                </li>
            </a>
            <a href="./mine.html" class="wrap">
                <li>
                    <span>我的</span>
                </li>
            </a>
            <a href="./identify.html" class="wrap" v-if="antiPosition">
                <li>
                    <span>管理员认证</span>
                </li>
            </a>
            <a href="./administrator.html" class="wrap" id="administrator" v-if="position">
                <li>
                    <span>管理账号</span>
                </li>
            </a>
        </div>
    </ul>
    <!-- 聊天部分 -->
    <div class="chat" id="root">
        <div class="chat-content">
            <ul class="simple-content" id="myList">
                <li style="margin-bottom: .625rem;">ChatGPT：你好！</li>
            </ul>
        </div>
        <input class="chat-box" type="text" id="send" placeholder="请输入你想问的问题，按下Enter发送消息" @keydown.enter="send">
        <input class="chat-box" type="text" id="sending" placeholder="发送中，请稍后..." style="display:none;" readonly>
    </div>
    <!-- 测试用按钮 -->
    <!-- <div style="display: block;" id="root">
        <button class="addGpt" @click="addGpt" style="color: #7B8CFE;">添加gpt聊天</button>
        <button class="addUser" @click="addUser">添加用户聊天</button>
    </div> -->
</body>

<script type="text/javascript" src="./vue/vue.js"></script>
<script type="text/javascript" src="../node_modules/axios/dist/axios.js"></script>
<script>
    Vue.config.productionTip = false; //阻止生成生产提示

    // 实例化vue
    const x = new Vue({
        el: '#root',
        data: {
            userId: localStorage.getItem("userId"),
            position: localStorage.getItem("position"),
        },
        methods: {
            addGpt() {
                var list = document.getElementById('myList');
                var newItem = document.createElement('li');
                newItem.textContent = 'ChatGPT：你好！';
                list.appendChild(newItem);
            },
            addUser() {
                var list = document.getElementById('myList');
                var newItem = document.createElement('li');
                newItem.textContent = '用户：你好！';
                list.appendChild(newItem);
            },
            send() {
                var userMessage = document.getElementById("send").value
                if (userMessage) {
                    //页面上做出发送效果
                    sendMsg(false, userMessage);

                    //发送前封印消息框
                    const sending = document.getElementById("sending")
                    sending.style = "display:block;"
                    const send = document.getElementById("send")
                    send.style = "display:none;"

                    //判断是否超过限制
                    if(localStorage.getItem("limitedNumber") < localStorage.getItem("todayNumber")){
                        alert("今日提问次数超过限制啦！");
                        return;
                    }
                    //把消息发到服务器上
                    setTimeout(function () {
                        axios({
                            url: 'http://localhost:9999/history/send', //无实际效果，我不会做
                            method: 'POST',
                            data: {
                                msg: document.getElementById('send').value
                            },
                            headers: {
                                'Content-Type': 'application/json'
                            }
                        }).then(resopnse => {
                            console.log(resopnse.data)

                            //页面上做出发送效果
                            var gptMessage = resopnse.data.data.msg
                            sendMsg(true, gptMessage)
                            
                            //生成一条新的历史记录
                            generateHistory(0, userMessage)
                            setTimeout(data => {
                                generateHistory(1, gptMessage)
                            },1000)

                            //解封
                            const sending = document.getElementById("sending")
                            sending.style = "display:none;"
                            const send = document.getElementById("send")
                            send.style = "display:block;"
                            userMessage = "";
                        }).catch(error => {
                            alert("出事啦！")
                            console.error(error.message)
                        })
                    },1000)

                } else {
                    alert("请在聊天框中输入内容！")
                }
            }
        },
    })

    //导航栏对应的vue
    const nav = new Vue({
        el: '#nav',
        data: {
            position: localStorage.getItem("position"),
        },
        computed: {
            antiPosition() {
                return !this.position
            }
        }
    })

    //在页面上发送消息
    function sendMsg(isChatgpt, message) {
        var list = document.getElementById('myList');
        var newItem = document.createElement('li');
        newItem.style = "margin-bottom: .625rem;"
        if (isChatgpt) {
            newItem.textContent = 'ChatGPT：' + message;
        } else {
            newItem.textContent = '用户：' + message;
        }
        list.appendChild(newItem);
    }

    //生成一条新的历史记录
    function generateHistory(isChatgpt, message) {
        axios({
            url: 'http://localhost:9999/history/generateHistory',
            method: 'POST',
            data: {
                isChatgpt: isChatgpt,
                context: message,
                userId: localStorage.getItem('userId')
            },
            headers: {
                'Content-Type': 'application/json'
            }
        }).then(resopnse => {
            console.log(resopnse.data)
        })
    }
</script>

</html>